<template>
  <view>
    <!-- 标签页标题 -->
    <view class="tab">
      <view class="tab-item" :class="{active: tab == 0}" @click="changeItem" data-item="0">视频</view>
      <view class="tab-item" :class="{active: tab == 1}" @click="changeItem" data-item="1">文章</view>
    </view>
    <!-- 文章页面 -->
    <view class="article-box" v-if="item==='1'">
      <!-- 输入框 -->
      <view class="search">
        <input type="text" placeholder="例如: 运动" @input="articleOnInput" @confirm="onConfirm" class="search-input" />
        <!-- 按钮 -->
        <button class="search-button" @click="searchArticle">搜索</button>
      </view>
      <scroll-view class="content-article" scroll-y :style="{height: windowHeight + 'px'}"
        :scroll-top="articleScrollTop">
        <view class="content-article-item" v-for="(item, i) in articleList" :key="i">
          <view class="article-title">{{item.title}}</view>
          <view class="article-content">{{item.content}}</view>
          <view class="article-bottom" @click="collectArticle(item)">
            <uni-icons class="article-bottom-icon" type="star" size="22" color="#ccc"></uni-icons>
            <view class="article-bottom-text">收藏</view>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="video-box" v-if="item==='0'">
      <!-- 输入框 -->
      <view class="search">
        <input type="text" placeholder="例如: 帕梅拉" @input="videoOnInput" @confirm="onConfirm" class="search-input" />
        <!-- 按钮 -->
        <button class="search-button" @click="searchVideo">搜索</button>
      </view>
      <!-- 视频页面 -->
      <scroll-view class="content-video" scroll-y :style="{height: windowHeight + 'px'}" :scroll-top="videoScrollTop">
        <view class="video-list" v-for="(item, i) in movieList" :key="i">
          <view class="video-list-top">
            <view class="list-top-left">
              <view class="video-title">标题：{{item.title}}</view>
              <view class="video-time">时间：{{item.video_time}}</view>
            </view>
            <view class="list-top-right" @click="collectVideo(item)">
              <uni-icons type="star" size="22" color="#ccc"></uni-icons>
              <view class="video-collect-text">收藏</view>
            </view>
          </view>
          <view class="video-box">
            <txv-video :vid="item.vid" playerid="txvl" autoPauseIfNavigate="true"></txv-video>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    computed: {
      ...mapState('m_user', ['userArticleList', 'userVideoList'])
    },
    data() {
      return {
        // 系统窗口高度
        windowHeight: 0,
        tab: 0,
        item: '0',
        active: 0,
        //文章页面查询关键词
        articleSearchKey: '',
        //视频页面查询关键词
        videoSearchKey: '',
        // 文章列表
        articleList: [],
        //视频列表
        movieList: [],
        // 右侧滚动条距离顶部的距离
        articleScrollTop: 0,
        videoScrollTop: 0
      };
    },
    onLoad() {
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 windowHeight 窗口可用高度动态赋值
      this.windowHeight = sysInfo.windowHeight - 110
      // 获取视频列表
      this.getMovieList('帕梅拉')
      // 获取文章列表
      this.getArticleList('运动')
    },
    // videoContext: null,
    // // 腾讯视频插件播放视频
    // onReady() {
    //   this.videoContext = uni.createVideoContext('txvl')
    //   const TxvContext = requirePlugin('tencentvideo')
    //   var txvContext = TxvContext.getTxvContext('txvl')
    //   // txvContext.play() //播放
    //   // txvContext.pause() //暂停
    // },
    methods: {
      ...mapMutations('m_user', ['updateUserArticleList', 'updateUserVideoList']),
      // tab 点击事件
      changeItem(e) {
        this.item = e.currentTarget.dataset.item
        this.tab = e.currentTarget.dataset.item
        // console.log(e.currentTarget.dataset.item)
      },
      //获取文章搜索框内容
      articleOnInput(e) {
        this.articleSearchKey = e.detail.value
      },
      // 搜索文章事件
      searchArticle() {
        // 重置右侧滚动条的距离
        this.articleScrollTop = this.articleScrollTop ? 0 : 0.1
        if (this.articleSearchKey === '') {
          this.getArticleList('运动')
          return uni.$showMsg('请输入搜索关键词')
        }
        const articleKey = this.articleSearchKey
        this.getArticleList(articleKey)
      },
      //获取视频搜索框内容
      videoOnInput(e) {
        this.videoSearchKey = e.detail.value
      },
      // 搜索视频事件
      searchVideo() {
        // 重置右侧滚动条的距离
        this.videoScrollTop = this.videoScrollTop ? 0 : 0.1
        if (this.videoSearchKey === '') {
          this.getMovieList('帕梅拉')
          return uni.$showMsg('请输入搜索关键词')
        }
        const videoKey = this.videoSearchKey
        this.getMovieList(videoKey)
      },
      // 获取文章事件
      async getArticleList(searchKey) {
        const {
          data: res
        } = await uni.$http.get('/api/guidance/articleList', {
          searchKey
        })
        if (res.meta.status !== 200) return uni.$showMsg('没有找到相关内容')
        this.articleList = res.message
      },
      // 获取视频事件
      async getMovieList(searchKey) {
        const {
          data: res
        } = await uni.$http.get('/api/guidance/videoList', {
          searchKey
        })
        if (res.meta.status !== 200) return uni.$showMsg('没有找到相关内容')
        this.movieList = res.message
      },
      // 收藏文章事件
      async collectArticle(item) {
        // 准备参数
        var token = uni.getStorageSync('token')
        var article = item
        const query = {
          token,
          article,
        }
        const {
          data: res
        } = await uni.$http.post('/api/update/article', query)
        if(res.meta.status === 500) return uni.$showMsg('文章已存在收藏夹内')
        if (res.meta.status !== 200 && res.meta.status !== 500) return uni.$showMsg('收藏文章失败')
        this.updateUserArticleList(res.message)
        return uni.$showMsg('收藏文章成功')
      },
      // 收藏视频事件
      async collectVideo(item) {
        // 准备参数
        var token = uni.getStorageSync('token')
        var video = item
        const query = {
          token,
          video,
        }
        const {
          data: res
        } = await uni.$http.post('/api/update/video', query)
        if(res.meta.status === 500) return uni.$showMsg('视频已存在收藏夹内')
        if (res.meta.status !== 200 && res.meta.status !== 500) return uni.$showMsg('收藏视频失败')
        this.updateUserVideoList(res.message)
        return uni.$showMsg('收藏视频成功')
      },

      // 下拉刷新的事件
      onPullDownRefresh() {
        setTimeout(() => {
          // 重新加载页面
          uni.hideLoading()
          uni.reLaunch({
            url: '../../subpkg/guidance/guidance',
          })
          uni.stopPullDownRefresh()
        }, 500)
      }
    }
  }
</script>

<style lang="scss">
  // 隐藏滚动条
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }

  .tab {
    display: flex;
    position: static;
    top: 0;
    left: 0;
    z-index: 999;
    height: 35px;

    .tab-item {
      flex: 1;
      font-size: 10pt;
      text-align: center;
      line-height: 72rpx;
      border-bottom: 6rpx solid #ddd;
    }

    .tab-item.active {
      color: #fba007;
      border-bottom-color: #fba007;
    }
  }

  /* 文章页面 */
  .article-box {

    .content-article {
      width: 675rpx;
      margin: 0 auto;

      .content-article-item {
        margin-bottom: 20rpx;
        padding: 10rpx 10rpx 20rpx 20rpx;
        letter-spacing: 2px;
        border-radius: 15rpx;
        background: linear-gradient(to bottom right, #fffffa, #fff4e0, #fff6f6);
        box-shadow: 0px 0.5px 4px 0.1px #f7f9ff inset;

        .article-title {
          font-size: 34rpx;
          font-weight: bold;
          text-align: center;
          margin: 20rpx 0 10rpx 0;
        }

        .article-content {
          text-indent: 2em;
          font-size: 34rpx;
          padding: 0 10rpx 20rpx 10rpx;
          margin-bottom: 20rpx;
          border-bottom: 1px solid #eee;
        }
      }

      .article-bottom {
        width: 100rpx;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-left: auto;
        margin-right: 10rpx;

        .article-bottom-text {
          color: #ccc;
          font-size: 24rpx;
          letter-spacing: 0px;
        }
      }

      .content-article-item:last-child {
        border-bottom: none;
      }
    }
  }



  // 视频
  .video-box {
    position: relative;

    .content-video {
      .video-list {
        background: linear-gradient(to bottom right, #fffffa, #fff4e0, #fff6f6);
        border-radius: 15rpx;
        box-shadow: 0px 0.5px 4px 0.1px #f7f9ff inset;
        width: 675rpx;
        height: 440rpx;
        overflow: hidden;
        margin: 0 auto;
        margin-bottom: 20rpx;
        padding: 30rpx 0 40rpx 0;

        .video-list-top {
          display: flex;
          flex-direction: row;

          .list-top-left {
            width: 580rpx;

            .video-title {
              font-weight: bold;
              font-size: 34rpx;
              margin: 0rpx 20rpx 5rpx 20rpx;
              color: black;
              border-left: 5px solid #f8a32a;
              height: 48rpx;
              padding-left: 20rpx;
              overflow: hidden;
              /* 超出部分隐藏 */
              white-space: nowrap;
              /* 一行显示，不换行 */
              text-overflow: ellipsis;
              /* 超出部分用...代替 */
            }

            .video-time {
              padding-left: 55rpx;
              font-size: 30rpx;
              color: gray;
              margin-bottom: 10rpx;
            }
          }

          .list-top-right {
            width: 100rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-bottom: 15rpx;
            border-left: 1px solid #eee;

            .video-collect-text {
              color: #ccc;
              font-size: 22rpx;
            }
          }
        }
      }
    }
  }

  .search {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 10rpx 0;
    margin: 0 20rpx;

    .search-input {
      height: 60rpx;
      flex: 1;
      border: 1px solid #ccc;
      border-radius: 15rpx;
      font-size: 30rpx;
      margin-left: 20rpx;
      padding-left: 20rpx;
      background-color: white;
      border: 1px solid #ddd;
    }

    .search-button {
      color: #fba007;
      padding: 0 20rpx;
      font-size: 30rpx;
      text-align: center;
      padding-bottom: 4rpx;
      // font-weight: bold;
      background-color: whitesmoke;
    }

    .search-button::after {
      border: none;
    }
  }
</style>